<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="app"></div>

    <script>
        const Son = {
            template:`
            <h4>哥是儿子,芳龄:{{age}}</h4>
            `,

            /* 接收来自父组件的数据 */
            props:["age"],

            /* 创建阶段 */
            // 创建实例之前调用
            beforeCreate() {
                console.log("beforeCreate:创建实例之前");
            },

            // 创建实例完成时回调
            created(){
                console.log("created:创建实例完成");
            },

            /* 挂载阶段：挂载者，往页面上渲染也 */
            // 挂载之前回调
            beforeMount(){
                console.log("beforeMount:挂载之前回调");
            },

            // 挂载完毕时回调
            // 通常会在此时发起网络请求获取组件数据
            mounted() {
                console.log("mounted:挂载完毕时回调");
            },

            /* 更新阶段 */
            // 更新之前回调
            beforeUpdate() {
                console.log("beforeUpdate:更新之前回调");
            },

            // 更新完毕时回调
            updated() {
                console.log("updated:更新完毕时回调");
            },

            /* 卸载阶段 */
            // 卸载前回调
            beforeUnmount() {
                console.log("beforeUnmount:卸载前回调");
            },

            // 卸载完毕时回调
            unmounted(){
                console.log("unmounted:卸载完毕时回调");
            }
        }

        Vue.createApp({
            template:`
            <h3>哥是你爹</h3>
            <son v-bind:age="age" v-if="showSon"></son>
            <button v-on:click="addAge">痴长一岁</button>
            <button v-on:click="switchShowSon">显隐子组件</button>
            `,

            data(){
                return {
                    age:0,
                    showSon:true
                }
            },

            methods: {
                addAge(){
                    this.age++
                },
                switchShowSon(){
                    this.showSon = !this.showSon
                }
            },

            // 声明子组件
            components:{
                Son
            }
        }).mount("#app")
    </script>
</body>
</html>